<template>
  <div>
    <div class="box">
      <div class="left">
        <!-- <div @click="goMyCenter" :class="{ select: index === 1 }">个人中心</div> -->
        <div @click="goMyClub" :class="{ select: index === 2 }">社团管理</div>
        <div @click="goMyNotice" :class="{ select: index === 3 }">公告管理</div>
        <div @click="goMyAct" :class="{ select: index === 4 }">活动管理</div>
        <div @click="goMyMember" :class="{ select: index === 5 }">成员管理</div>
        <div @click="goAdviceList" :class="{ select: index === 6 }">
          用户留言
        </div>
        <div @click="goJoinClub" :class="{ select: index === 7 }">入社审核</div>
        <div @click="goExit">退出登录</div>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyIndex",
  data() {
    return {
      index: 1,
    };
  },
  methods: {
    goMyCenter() {
      this.index = 1;
      this.$router.push("/MyCenter");
    },
    goMyClub() {
      this.index = 2;
      this.$router.push("/MyClub");
    },
    goMyNotice() {
      this.index = 3;
      this.$router.push("/MyNotice");
    },
    goMyAct() {
      this.index = 4;
      this.$router.push("/MyAct");
    },
    goMyMember() {
      this.index = 5;
      this.$router.push("/MyMember");
    },
    goAdviceList() {
      this.index = 6;
      this.$router.push("/AdviceList");
    },
    goJoinClub() {
      this.index = 7;
      this.$router.push("/JoinClub");
    },
    goExit() {
      this.index = 1;
      this.$router.push("/MyLogin");
    },
  },
};
</script>

<style>
.box {
  position: absolute;
  top: 110px;
  left: 200px;
  height: 800px;
  width: 1500px;
  border: 5px solid #1e874c;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  height: 800px;
  width: 250px;
  border-right: 5px solid #1e874c;
}
.left div {
  height: 60px;
  width: 250px;
  font-size: 25px;
  line-height: 60px;
  border-bottom: 2px solid #1e874c;
  text-align: center;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  height: 800px;
  width: 1245px;
  overflow-y: auto;
}
.select {
  background-color: #ccc;
}
</style>